<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>부트스트랩 기초-기본 CSS</title>
    <meta name="description" content="" />
    <meta name="author" content="" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    <link rel="stylesheet" href="css/font-awesome.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    
    

    <!--[if IE 7]>
      <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
    <![endif]-->    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">부트스트랩 기초 배우기</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class=""><a href="hero1-begin.html">구조</a></li>
              <li class="active"><a href="hero2-begin.html">기본 CSS</a></li>
              <li class=""><a href="hero3-begin.html">구성요소1</a></li>
              <li class=""><a href="hero4-begin.html">구성요소2</a></li>
              <li class=""><a href="hero5-begin.html">자바스크립트</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>안녕하세요!</h1>
        <p>부트스트랩 기초 배우기입니다.</p>
        <h2>부트스트랩 기초-기본 CSS</h2>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>

      <div id="toc" class="span3 well well-small">
      </div><!--/.well -->

      <!-- Example row of columns -->
      <hr>
      <div class="row">
        <div class="span12">
            <hr>
            <h4>글자</h4>
            <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
            <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
            <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
            <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
            <hr>
            <h4>생략과 약어</h4>
            <abbr title="attribute">attr</abbr>
            <abbr title="HyperText Markup Language" class="initialism">html</abbr>
            <hr>
            <h4>인용(blockquote)</h4>
            <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            </blockquote>
            <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <small>Someone famous <cite title="Source Title">Source Title</cite></small>
            </blockquote>
            <blockquote class="pull-right">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <small>Someone famous <cite title="Source Title">Source Title</cite></small>
            </blockquote>
            <hr>
            <h4>목록</h4>
            <ul class="unstyled">
                <li>Lorem ipsum dolor sit amet</li>
                <li>Nulla volutpat aliquam velit
                    <ul class="unstyled">
                        <li>Phasellus iaculis neque</li>
                        <li>Ac tristique libero volutpat at</li>
                    </ul>
                </li>
                <li>Faucibus porta lacus fringilla vel</li>
            </ul>
            <hr>
            <ul class="inline">
                <li>Lorem ipsum dolor sit amet</li>
                <li>Nulla volutpat aliquam velit</li>
                <li>Faucibus porta lacus fringilla vel</li>
            </ul>
            <dl class="dl-horizontal">
                <dt>Description lists</dt>
                <dd>A description list is perfect for defining terms.</dd>
                <dt>Euismod</dt>
                <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                <dt>Malesuada porta</dt>
                <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
            </dl>
            <hr>
            <h4>코드</h4>
            For example, <code>&lt;section&gt;</code> should be wrapped as inline.
            <hr>
            <pre class="prettyprint linenums">
                &lt;blockquote&gt;
                    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
                    &lt;small&gt;Someone famous &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/small&gt;
                &lt;/blockquote&gt;
            </pre>
            <hr>
            <h4>테이블(table)</h4>
            <table class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="success">
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr class="info">
                        <td>2</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr class="error">
                        <td>3</td>
                        <td>Larry</td>
                        <td>The Bird</td>
                        <td>@twitter</td>
                    </tr>
                </tbody>
            </table>
            <hr>
            <h4>fieldset, legend 태그</h4>
            <form>
                <fieldset>
                    <legend>Legend</legend>
                    <label>Label name</label>
                    <input type="text" placeholder="Type something...">
                    <span class="help-block">Example block-level help text here.</span>
                    <label class="checkbox">
                        <input type="checkbox"> Check me out
                    </label>
                    <button type="submit" class="btn">Submit</button>
                </fieldset>
            </form>
            <hr>
            <h4>검색 박스</h4>
            <form class="form-search">
                <input type="text" class="input-medium search-query">
                <button type="submit" class="btn">Search</button>
            </form>
            <hr>
            <form class="form-inline">
                <input type="text" class="input-small" placeholder="Email">
                <input type="password" class="input-small" placeholder="Password">
                <label class="checkbox">
                    <input type="checkbox"> Remember me
                </label>
                <button type="submit" class="btn">Sign in</button>
            </form>
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Email</label>
                    <div class="controls">
                        <input type="text" id="inputEmail" placeholder="Email">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputPassword">Password</label>
                    <div class="controls">
                        <input type="password" id="inputPassword" placeholder="Password">
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox"> Remember me
                        </label>
                        <button type="submit" class="btn">Sign in</button>
                    </div>
                </div>
            </form>

            <hr>
            <h4>input 태그</h4>
            <form>
                <input type="text" placeholder="Text input">
                <input type="password" placeholder="password input">
                <input type="datetime" placeholder="datetime input">
                <input type="datetime-local" placeholder="datetime-local input">
                <input type="date" placeholder="date input">
                <input type="month" placeholder="month input">
                <input type="time" placeholder="time input">
                <input type="week" placeholder="week input">
                <input type="number" placeholder="number input">
                <input type="url" placeholder="url input">
                <input type="search" placeholder="search input">
                <input type="tel" placeholder="tel input">
                <input type="color" placeholder="color input">
            </form>

            <hr>
            <h4>textarea 태그</h4>
            <form>
                <textarea rows="3" placeholder="Textarea input" class="span3"></textarea>
            </form>

            <hr>
            <h4>체크박스와 라디오버튼</h4>
            <form>
                <label class="checkbox">
                    <input type="checkbox" value="">
                    Opriont one is this and that-be suer to include why it's great
                </label>
                <label class="radio">
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    Option one is this and that-be sure to include why it's great
                </label>
                <label class="radio">
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                    Option two con be somthing else and selecting it will deselect option one
                </label>
            </form>
            <hr>
            <form>
                <label class="checkbox inline">
                    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
                </label>
                <label class="checkbox inline">
                    <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
                </label>
                <label class="checkbox inline">
                    <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
                </label>
            </form>

            <hr>
            <h4>select 박스</h4>
            <form>
                <select>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
                <select multiple="multiple">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </form>

            <hr>
            <h4>폼의 확장 기능</h4>
            <h4>input-prepend, input-append 선택자</h4>
            <div class="input-prepend">
                <span class="add-on">@</span>
                <input class="span2" id="prependedInput" type="text" placeholder="Username">
            </div>
            <div class="input-append">
                <input class="span2" id="appendedInput" type="text">
                <span class="add-on">.00</span>
            </div>
            <div class="input-prepend input-append">
                <span class="add-on">$</span>
                <input class="span2" id="appendedInput" type="text">
                <span class="add-on">.00</span>
            </div>
            <div class="input-append">
                <input class="span2" id="appendedInputButtons" type="text">
                <span class="btn" type="button">Search</span>
                <span class="btn" type="button">Options</span>
            </div>
            <div class="input-append">
                <input class="span2" id="appendedDropdownButton1" type="text">
                <div class="btn-group">
                    <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div><!-- /btn-group -->
            </div>
            <div class="input-prepend input-append">
              <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                  Action
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                </ul>
              </div>
              <input class="span2" id="appendedPrependedDropdownButton" type="text">
              <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                  Action
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                </ul>
              </div>
            </div>

            <hr>
            <h4>드랍다운 버튼 형태</h4>
            <div class="input-prepend">
                <div class="btn-group">
                    <button class="btn" tabindex="-1">Action</button>
                    <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1"><span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <input type="text">
            </div>

            <hr>
            <h4>input 박스의 크기 조절</h4>
            <div>
                <input class="input-mini" type="text" placeholder=".input-mini">
                <input class="input-small" type="text" placeholder=".input-small">
                <input class="input-medium" type="text" placeholder=".input-medium">
                <input class="input-large" type="text" placeholder=".input-large">
                <input class="input-xlarge" type="text" placeholder=".input-xlarge">
                <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
            </div>
            <div>
                <input class="span1" type="text" placeholder=".span1">
                <input class="span2" type="text" placeholder=".span2">
                <input class="span3" type="text" placeholder=".span3">
                <select class="span1">
                ...
                </select> 
                <select class="span2">
                ...
                </select> 
                <select class="span3">
                ...
                </select> 
            </div>

            <hr>
            <h4>input의 수평 배치</h4>
            <div class="controls">
                <input class="span5" type="text" placeholder=".span5">
            </div>
            <div class="controls controls-row">
                <input class="span4" type="text" placeholder=".span4">
                <input class="span1" type="text" placeholder=".span1">
            </div>

            <hr>
            <h4>span 태그를 이용한 input 입력박스의 비활성화</h4>
            <div>
                <span class="input-xlarge uneditable-input">Some value here</span>
            </div>

            <hr>
            <h4>저장 및 취소 버튼 배치</h4>
            <!--
            <div class="">
                <button type="submit" class="btn btn-primary">Save changes</button>
                <button type="button" class="btn">Cancel</button>
            </div>
            -->

            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Email</label>
                    <div class="controls">
                        <input type="text" id="inputEmail" placeholder="Email">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputPassword">Password</label>
                    <div class="controls">
                        <input type="password" id="inputPassword" placeholder="Password">
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox"> Remember me
                        </label>
                        <button type="submit" class="btn">Sign in</button>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn">Cancel</button>
                </div>
            </form>

            <hr>
            <h4>input 박스의 도움말 텍스트</h4>
            <input type="text"><span class="help-inline">Inline help text</span><br>
            <input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

            <hr>
            <h4>input 태그의 아웃라인</h4>
            <div>
                <input type="text" value="This is focused...">
            </div>
            <div>
                <input class="span3" type="email" required>
            </div>

            <hr>
            <h4>비활성화된 input</h4>
            <input class="input-xlarge" type="text" placeholder="Disabled input here..." disabled>

            <hr>
            <h4>폼 인증</h4>
            <div class="control-group warning">
                <label class="control-label" for="inputWarning">Input with warning</label>
                <div class="controls">
                    <input type="text" id="inputWarning">
                    <span class="help-inline">Something may have gone wrong</span>
                </div>
            </div>
            <div class="control-group error">
                <label class="control-label" for="inputError">Input with error</label>
                <div class="controls">
                    <input type="text" id="inputError">
                    <span class="help-inline">Please correct the error</span>
                </div>
            </div>
            <div class="control-group success">
                <label class="control-label" for="inputSuccess">Input with success</label>
                <div class="controls">
                    <input type="text" id="inputSuccess">
                    <span class="help-inline">Woohoo!</span>
                </div>
            </div>

            <hr>
            <h4>폼 인증(자바스크립트 추가)</h4>
            <form action="" id="contact-form" class="form-horizontal">
                <fieldset>
                    <legend>Sample Contact Form <small>(will not submit any information)</small></legend>
                    <div class="control-group">
                        <label class="control-label" for="name">Your Name</label>
                        <div class="controls">
                            <input type="text" class="input-xlarge" name="name" id="name">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="email">Email Address</label>
                        <div class="controls">
                            <input type="text" class="input-xlarge" name="email" id="email">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="subject">Subject</label>
                        <div class="controls">
                            <input type="text" class="input-xlarge" name="subject" id="subject">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="message">Your Message</label>
                        <div class="controls">
                            <textarea class="input-xlarge" name="message" id="message" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary btn-large">Submit</button>
                        <button class="btn">Cancel</button>
                    </div>
                </fieldset>
            </form>

            <hr>
            <h4>버튼</h4>
            <div>
                <button type="button" class="btn">Default</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-danger">Danger</button>
                <button type="button" class="btn btn-inverse">Inverse</button>
            </div>
            <hr>
            <div>
                <button type="button" class="btn btn-large btn-primary">Primary-large</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-small btn-primary">Primary-small</button>
                <button type="button" class="btn btn-mini btn-primary">Primary-mini</button>
            </div>
            <hr>
            <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
            <hr>
            <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
            <button type="button" class="btn btn-large btn-primary" disabled>Primary-large</button>

            <hr>
            <h4>이미지</h4>
            <img src="img/animals-q-c-140-140-9.jpg" class="img-rounded">
            <img src="img/animals-q-c-140-140-6.jpg" class="img-circle">
            <img src="img/animals-q-c-140-140-4.jpg" class="img-polaroid">
            <img src="img/abstract-q-c-540-540-4.jpg" class="img-circle">

            <hr>
            <h4>아이콘</h4>
            <i class="icon-search"></i>
            <i class="icon-search icon-white"></i>

            <hr>
            <h4>버튼에 삽입하기</h4>
            <div class="btn-toolbar">
                <div class="btn-group">
                    <a href="#" class="btn"><i class="icon-align-left"></i></a>
                    <a href="#" class="btn"><i class="icon-align-center"></i></a>
                    <a href="#" class="btn"><i class="icon-align-right"></i></a>
                    <a href="#" class="btn"><i class="icon-align-justify"></i></a>
                </div>
            </div>

            <hr>
            <h4>링크에 삽입하기</h4>
            <div class="btn-group">
                <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
                <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
                    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
                    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
                    <li class="divider"></li>
                    <li><a href="#"><i class="i"></i> Make admin</a></li>
                </ul>
            </div>

            <hr>
            <h4>아이콘의 크기 변경</h4>
            <a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
            <a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
            <a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>

            <hr>
            <h4>메뉴에 사용하는 경우 색상 변경</h4>
            <ul class="nav nav-list">
                <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
                <li><a href="#"><i class="icon-book"></i> Library</a></li>
                <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
                <li><a href="#"><i class="i"></i> Misc</a></li>
            </ul>

            <hr>
            <h4>폼에 사용하는 경우</h4>
            <div class="control-group">
                <label class="control-label" for="inputIcon">Email Address</label>
                <div class="controls">
                    <div class="input-prepend">
                        <span class="add-on"><i class="icon-envelope"></i></span>
                        <input class="span2" id="inputIcon" type="text">
                    </div>
                </div>
            </div>
            <hr>
        </div>
      </div>
      <footer>
        <p>&copy; Company 2012</p>
      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!--
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>
    -->
  </body>
</html>
